<template>
	<div>
		<div class="mb-[10px] flex items-center gap-4">
			<cl-date-picker
				v-model="appointmentTime"
				type="daterange"
				valueFormat="YYYY-MM-DD"
				placeholder="请选择时间"
			></cl-date-picker>
			<el-select
				v-model="visitType"
				placeholder="全部"
				style="max-width: 120px; min-width: 100px"
			>
				<el-option label="全部" value=""></el-option>
				<el-option label="新客" value="first"></el-option>
				<el-option label="复查" value="review"></el-option>
			</el-select>
			<cl-export-btn :columns="exportColumns" :data="tableData" filename="预约看板数据" />
		</div>
		<el-table :data="tableData" border>
			<el-table-column label="门店" prop="shop"></el-table-column>
			<el-table-column
				v-for="col in columns"
				:key="col.id"
				:label="col.name"
				:prop="col.id.toString()"
			></el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'appointment-board'
});

import { useCool } from '/@/cool';
import { onMounted, ref, watch, computed } from 'vue';
import dayjs from 'dayjs';

const { service } = useCool();
const tableData = ref([]);
const columns = ref([]);
const visitType = ref('');
const appointmentTime = ref([
	dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
	dayjs().format('YYYY-MM-DD')
]);

const exportColumns = computed(() => {
	return [
		{
			label: '门店',
			prop: 'shop'
		},
		...columns.value.map(col => ({
			label: col.name,
			prop: col.id.toString()
		}))
	];
});

// 监听时间变化并查询
watch(appointmentTime, val => {
	if (val && val.length === 2) {
		getData();
	}
});

// 监听就诊类型变化
watch(visitType, () => {
	getData();
});

onMounted(async () => {
	getData();
});

// 获取数据
function getData() {
	const params = {
		visitType: visitType.value,
		startTime: appointmentTime.value[0],
		endTime: appointmentTime.value[1]
	};

	service.appointment.info.board(params).then(res => {
		columns.value = res.columnNames;
		tableData.value = res.list;
	});
}
</script>
